<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-10 15:32:39
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-10 16:20:04
 * @FilePath: \nien-vue3-admin\src\views\finance\invoiceManangement\components\BillingDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="visible"
    title="开票"
    :before-close="cancel"
    width="350px"
    :close-on-press-escape="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="发票号码" prop="invoiceNo">
        <el-input
          v-model="formData.invoiceNo"
          clearable
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="开票时间" prop="invoiceDate">
        <el-date-picker
          v-model="formData.invoiceDate"
          type="date"
          clearable
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="info" @click="cancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { invoiceBilling } from '@/api/finance/billing'
import { validateForm } from '@/utils'

const formData = reactive({
  invoiceNo: '',
  invoiceDate: '',
  ids: [],
})
const loading = ref<boolean>(false)
const visible = ref<boolean>(false)
const formRef = ref()
const rules = {
  invoiceNo: [{ required: true, message: '请输入发票号码', trigger: ['change', 'blur'] }],
  invoiceDate: [{ required: true, message: '请选择开票时间', trigger: ['change', 'blur'] }],
}
const confirm = () => {
  validateForm(formRef.value, () => {
    loading.value = true
    invoiceBilling(formData).then(({ code, msg }) => {
      if (code === 200) {
        ElMessage.success('开票成功！')
        cancel()
      } else {
        ElMessage.error(msg)
      }
    }).finally(() => {
      loading.value = false
    })
  })
}
const cancel = () => {
  formRef.value.resetFields()
  visible.value = false
}

const open = (id:number) => {
  formData.ids = [id]
  visible.value = true
}

defineExpose({
  open,
})

</script>

<style lang="less" scoped>
/deep/ .el-input__wrapper,
/deep/ .el-date-editor{
  width: 100%;
}
</style>